<template>
  <div class="bannerstyle">
    <div class="bannerstyle-header">
      <div class="title">{{ datas.title }}</div>
      <div class="desc">{{ datas.desc }}</div>
    </div>

    <div class="bannerstyle-body">
      <div
        v-for="(item, index) in datas.form.source_list"
        :key="index"
        class="banner-item"
      >
        <div class="banner-item__close">
          <!-- 删除 -->
          <i class="el-icon-close" @click="handleDelete(index)"></i>
        </div>
        <div class="banner-item__header">
          <div class="img-uploader" @click="chooseImage(item)">
            <div v-if="item.url" class="img-uploader-card">
              <el-image :src="item.url" class="img-uploader-img"></el-image>
              <div class="img-uploader-btn">重新上传</div>
            </div>
            <div v-else class="img-uploader-card">
              <i class="el-icon-plus img-uploader-icon"></i>
              <div class="img-uploader-text">上传图片</div>
            </div>
          </div>
          <el-radio-group v-model="item.type">
            <el-radio
              v-for="radio in list"
              :key="radio.label"
              :label="radio.label"
            >
              {{ radio.title }}
            </el-radio>
          </el-radio-group>
        </div>
        <div v-if="item.type == 1" class="banner-item__course">
          <div class="course-add">
            <span class="text">绑定课程</span>
            <el-button type="primary" size="mini" @click="chooseCourse(item)">{{ item.course_id > 0 ? '重新选择' : '选择课程' }}</el-button>
          </div>
          <div v-if="item.course_id > 0" class="course-del">
            <span class="text">已选课程：{{ item.course_title }}</span>
            <!--<i class="el-icon-close close"></i>-->
          </div>
        </div>
        <div v-else-if="item.type == 2" class="banner-item__href">
          <div class="text">输入地址</div>
          <el-input
            v-model="item.href"
            placeholder="请输入地址"
            size="small"
          ></el-input>
        </div>
      </div>
    </div>

    <div class="bannerstyle-footer">
      <el-button type="primary" size="small" @click="handleAdd">
        <i class="el-icon-plus" />添加
      </el-button>
    </div>
    <!-- 选择课程 start-->
    <choose-course-dialog
      v-if="chooseCourseVisible"
      :visible.sync="chooseCourseVisible"
      :limit="1"
      :list="attachList"
      from="config"
      @submit="setCurrentItemCourse"
    ></choose-course-dialog>
    <!-- 选择课程 end-->
    <!-- 选择图片 start -->
    <choose-image
      v-if="chooseImageVisible"
      :value.sync="currentItem.icon_id"
      field="icon_id"
      :form-datas="currentItem"
      :view="false"
      @close="closeChooseImage"
      @changeAttach="setCurrentItemAttach"
    ></choose-image>
    <!-- 选择图片 end -->
  </div>
</template>

<script>
import ChooseCourseDialog from '@/pages/course/components/ChooseCourseDialog'
import ChooseImage from '@/pages/material/choose/image.vue';

export default {
  name: 'BannerStyle',
  components: {
    ChooseCourseDialog,
    ChooseImage
  },
  props: {
    datas: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      list: [
        {
          label: 1,
          title: '站内链接'
        },
        {
          label: 2,
          title: '自定义链接'
        }
      ],
      chooseCourseVisible: false,
      chooseImageVisible: false,
      currentItem: {}
    }
  },
  computed: {
    attachList() {
      let courseList = []
      if (this.currentItem.course_id) {
        courseList = [
          {
            title: this.currentItem.course_title,
            value: this.currentItem.course_id
          }
        ]
      }

      return courseList
    }
  },
  methods: {
    // 添加
    handleAdd() {
      const data = {
        url: '',
        type: 1,
        href: '',
        course_id: 0,
        course_title: ''
      }
      if (this.datas.form.source_list.length < 10) {
        this.datas.form.source_list.push(data)
      } else {
        this.$message.info('最多只能添加10个')
      }
    },

    // 删除
    handleDelete(index) {
      if (this.datas.form.source_list.length > 1 || index > 0) {
        this.datas.form.source_list.splice(index, 1)
      } else {
        this.$message.info('默认显示一个!')
      }
    },
    chooseImage(item) {
      this.currentItem = item
      this.chooseImageVisible = true
    },
    closeChooseImage() {
      this.chooseImageVisible = false
    },
    setCurrentItemAttach({ url, id }) {
      this.currentItem.url = url
      this.currentItem.icon_id = id
    },
    chooseCourse(item) {
      this.currentItem = item
      this.chooseCourseVisible = true
    },
    setCurrentItemCourse(value, course) {
      const currentCourse = course.length > 0 ? course[0] : {}
      this.currentItem.course_id = currentCourse.value
      this.currentItem.course_title = currentCourse.title
      this.currentItem.course_type = currentCourse.course_type
      this.chooseCourseVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.bannerstyle {
  padding-top: 20px;
  padding-left: 24px;
  padding-right: 34px;

  &-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      line-height: 24px;
    }

    .desc {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #909399;
      line-height: 16px;
    }
  }

  &-body {
    margin-top: 5px;

    .banner-item {
      padding: 15px 0;
      border-bottom: 1px dashed #ebeef5;
      position: relative;
    }

    .banner-item__close {
      margin-bottom: 10px;
      display: flex;
      justify-content: flex-end;

      .el-icon-close {
        color: #8c8c8c;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .banner-item__header {
      display: flex;
      align-items: center;

      .img-uploader {
        cursor: pointer;
        width: 167px;
        height: 62px;
        background: #f7f7f7;
        margin-right: 20px;
        overflow: hidden;
      }

      .img-uploader-card {
        width: 167px;
        height: 62px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .img-uploader-btn {
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        line-height: 27px;
        text-align: center;
        width: 69px;
        height: 27px;
        border-radius: 15px;
        border: 1px solid #ffffff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .img-uploader-img {
        display: block;
        width: 210px;
        height: 81px;
      }

      .img-uploader-icon {
        font-size: 18px;
        color: #b5b5b6;
      }

      .img-uploader-text {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #b5b5b6;
        line-height: 14px;
      }

      .el-radio {
        padding: 5px 0;
      }
    }

    .banner-item__course {
      margin-top: 10px;

      .course-add {
        display: flex;
        align-items: center;

        .text {
          font-size: 14px;
          font-weight: 400;
          color: #303133;
          margin-right: 10px;
        }
      }

      .course-del {
        margin-left: 66px;
        margin-top: 10px;
        display: flex;
        align-items: center;

        .text {
          flex: 1;
          min-width: 0;
          font-size: 12px;
          font-weight: 400;
          color: #909399;
          margin-right: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .close {
          font-size: 12px;
          color: #8c8c8c;
        }
      }
    }

    .banner-item__href {
      margin-top: 10px;
      display: flex;
      align-items: center;

      .text {
        font-size: 14px;
        font-weight: 400;
        color: #303133;
        margin-right: 10px;
      }

      .el-input {
        flex: 1;
      }
    }
  }

  &-footer {
    padding: 20px 0;

    .el-button {
      width: 100%;
    }
  }
}
</style>
